<template>
  <div>
    <Contents :styles="{ background: 'white' }">
      <Swiper :images="swiperList"></Swiper>
      <IconBottonBox :iconBotton="girdList"></IconBottonBox>
      <BargainBox></BargainBox>
      <Bargain :bargain="bargainList"></Bargain>
      <SpecialBox></SpecialBox>
      <Special :special="specialList"></Special>
      <PopularityBox></PopularityBox>
      <Popularity :popularity="popularityList"></Popularity>
      <div class="box"></div>
    </Contents>
  </div>
</template>

<script>
import Contents from "../components/content/contents";
import Swiper from "../components/swiper/Swiper";
import IconBottonBox from "../components/gird/iconBottonBox";
import BargainBox from "../components/bargain/bargainBox";
import Bargain from "../components/bargain/bargain";
import SpecialBox from "../components/specialColumn/specialBox";
import Special from "../components/specialColumn/special";
import PopularityBox from "../components/popularity/popularityBox";
import Popularity from "../components/popularity/popularity";
export default {
  components: {
    Contents,
    Swiper,
    IconBottonBox,
    BargainBox,
    Bargain,
    SpecialBox,
    Special,
    PopularityBox,
    Popularity,
  },
  data() {
    return {
      swiperList: [],
      bargainList: [],
      specialList: [],
      popularityList: [],
      girdList: [
        {
          title: "签到",
          img: require("../assets/gird/qiandao.png"),
          path: "/qiandao",
        },
        {
          title: "领劵",
          img: require("../assets/gird/lingjuan.png"),
          path: "/lingjuan",
        },
        {
          title: "专栏",
          img: require("../assets/gird/zhuanlan.png"),
          path: "/zhuanlan",
        },
        {
          title: "砍价",
          img: require("../assets/gird/kanjian.png"),
          path: "/kanjian",
        },
      ],
    };
  },
  mounted() {
    //轮播图
    this.$Api.swiperList().then((res) => {
      // console.log(res.data.data);
      this.swiperList = res.data.data;
    });

    //砍价列表数据
    this.$Api.required().then((res) => {
      // console.log(res.data.data);
      var temp = res.data.data;
      for (let index = 5; index < 8; index++) {
        this.bargainList.push(temp[index]);
      }
    });

    //专题列表
    this.$Api.special().then((res) => {
      // console.log(res);
      this.specialList = res.data.data;
    });

    //商品数据
    this.$Api.required().then((res) => {
      // console.log(res.data.data);
      var temp = res.data.data;
      for (let index = 8; index < 28; index++) {
        this.popularityList.push(temp[index]);
      }
    });
  },
};
</script>

<style>
.box {
  height: 64px;
}
</style>